<template>
  <div class="detail">
    <div class="header">
      <van-nav-bar title="详情页" @click-left="onClickLeft">
        <template #right>
          <van-popover
            v-model="showPopover"
            trigger="click"
            placement="bottom-end"
            theme="dark"
            :actions="actions"
            @select="onSelect"
          >
            <template #reference>
              <van-icon name="ellipsis" size="26" color="#000" />
            </template>
          </van-popover>
        </template>
        <template #left>
          <van-icon name="arrow-left" size="26" color="#000" />
        </template>
      </van-nav-bar>
    </div>
    <div class="container">
      <van-swipe :autoplay="3000" class="my-swipe">
        <van-swipe-item v-for="(item, index) in bannerList" :key="index">
       
        <img :src="item" @click="swipeImg(item,index)"/>
  
          <div><span class="dwei">{{index*1+1}}/{{bannerList.length}}</span></div>
        </van-swipe-item>

      </van-swipe>
       
      <div class="price">
        <p>￥{{ price | fixed }}</p>
        <span><van-icon name="refund-o" />降价提醒</span>
        <span><van-icon name="star-o" />收藏</span>
      </div>
      <div class="title">
        <p>{{ title }}</p>
      </div>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-goods-action-icon icon="cart-o" text="购物车" />
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button type="warning" text="加入购物车" />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>

    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect1"
    />
<main>

</main>
  </div>
</template>  

<script>
import { getBannerList,} from "../api/detail";
import Vue from "vue";
import {
  NavBar,
  Popover,
  ShareSheet,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
  ImagePreview ,
 
} from "vant";

Vue.use(NavBar);
Vue.use(Popover);
Vue.use(ShareSheet);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
Vue.use(ImagePreview );


export default {
  data() {
    return {
      bannerList: [],
      
      showPopover: false,
      actions: [
        { text: "首页", icon: "wap-home-o" },
        { text: "分享", icon: "share-o" },
      ],
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      price: 0,
      title: "",
  

     

      
    };
  },
  methods: {
  swipeImg(item,index){
   ImagePreview ({
     images: this.bannerList, //需要预览的图片 URL 数组
        showIndex: true, //是否显示页码
        loop: false, //是否开启循环播放
        startPosition: index, //图片预览起始位置索引
        closeable: true,
});
 
  },
    onClickLeft() {
      this.$router.back();
    },
    onSelect(action, index) {
      switch (index) {
        case 0:
          this.$router.push("/home");
          break;
        case 1:
          this.showShare = true;
          break;

        default:
          break;
      }
    },
    onSelect1(option) {
      console.log(option);
      this.showShare = false;
    },
    
  },
  filters: {
    fixed(val){
        return val.toFixed(2)
    },

  },
  created() {
    getBannerList(this.$route.params.proid).then((data) => {
      this.bannerList = data.data.data.banners[0].split(",");
      this.title = data.data.data.proname;
      this.price = data.data.data.originprice;
      console.log(data)
     
     
     
    });
    
  },
};
</script>

<style scoped>
.my-swipe{
    height: 3rem;

}
.my-swipe img {
  width: 100%;
  
}
.price,
.title {
  padding: 0 15px;
  margin: 10px 0;
}
.price{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.price span{
    display: flex;
    flex-direction: column;
    align-items: center;

}
.price p{
    color: orangered;
    font-size: .2rem;
    font-weight: 600;
}
.container{
    position: relative;
}
.dwei{
    height: .2rem;
    width: .5rem;
    background: rgba(0, 0, 0, 0.2);
    position:absolute;
    right:0;
    bottom:0;
    color: aliceblue;
    text-align: center;
    line-height:.2rem ;
    border-radius: .1rem 0 0 .1rem;
}
</style>